嗨大家好，我是Eric。在之前的「事件迴圈」文章中，我多次提到了一個至關重要的概念，那就是「渲染線程」。
這個線程在前端開發中扮演著關鍵角色，特別是在實現與使用者互動的過程中，今天，我們就來談談瀏覽器渲染的原理，並會依序走過渲染流程的每一個環節，讓我們一起來了解吧！

渲染時間點與流程

瀏覽器的渲染流程可以想像為一家餐廳的營運。在這個比喻中，渲染時間點即是廚師（渲染主線程）開始料理的瞬間。而整個渲染流程則如同廚房的各個步驟：從準備食材到烹煮，最終到上菜。

HTML 解析

解析 HTML 就像是研讀菜譜。瀏覽器會逐行解析 HTML 文件，以確定如何構建網頁。

Document Object Model (DOM)

這一步相當於廚師根據菜譜進行食材準備。DOM 是 HTML 元素的結構化表示，並讓 JavaScript 和 CSS 能夠與網頁互動。

CSS Object Model (CSSOM)

CSSOM 是 CSS 規則的結構化表示，它指導瀏覽器如何裝飾網頁。

遇到 CSS 的處理

當解析 HTML 過程中遇到 CSS 代碼，瀏覽器會暫停 HTML 的解析，優先解析並應用 CSS 規則。這就如同廚師在烹煮過程中發現需要特殊調料，會暫時停下來確保所有調料都準備妥當。

遇到 JavaScript 代碼的處理

因為 JavaScript 可以更改 DOM 和 CSSOM，瀏覽器會暫停渲染流程，等待 JavaScript 執行完成。這類似於廚師在烹煮過程中接到修改菜單的要求，必須暫停當前工作以適應新的需求。

預解析線程

為了提高效率，瀏覽器會啟動一個預解析線程來預先下載和解析 CSS 和 JavaScript。這就如同有助手在廚師忙於其他事務時，先行準備部分食材。

樣式計算與佈局

在這個階段，瀏覽器會計算每個元素的最終樣式，並確定各元素的大小和位置。這可以比喻為廚師確定如何裝飾並擺放食物。

結語

了解瀏覽器的渲染原理不僅有助於網頁性能的優化，更能提供更好的用戶體驗。就如同一名出色的廚師需要深入了解他的廚房一樣，作為軟體工程師，我們也應該熟悉這個「網頁廚房」的各個環節，那麼我們明天見~~